<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" >

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" th:src="@{/js/jquery-2.1.4.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-3.3.7-dist/css/bootstrap.min.css}">
<script type="text/javascript" th:src="@{/js/bootstrap-treeview/bootstrap-treeview.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-treeview/bootstrap-treeview.min.css}">
<script type="text/javascript" th:src="@{/js/bootStrap-addTabs/bootstrap.addtabs.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootStrap-addTabs/bootstrap.addtabs.css}">
<script type="text/javascript" th:src="@{/js/bootstrap-table/bootstrap-table.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-table/bootstrap-table.min.css}">
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-fileinput/css/fileinput.css}">
<script type="text/javascript" th:src="@{/js/bootstrap-bootbox/bootbox.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-fileinput/js/fileinput.min.js}"></script>
<script th:src="@{/js/bootstrap-fileinput/js/locales/zh.js}"></script>

<body>
<table id="myTable"></table>

</body>
<script type="text/javascript">
    function add(){
        $.ajax({
            url:"addType",
            type:"post",
            data:$("#myForm").serialize(),
            success:function(){
                alert("成功")
                $('#myTable').bootstrapTable('refresh');//刷新表格
                $("#addLayer").modal('hide');
            }
        })
    }


    /**/
    $("#myTable").bootstrapTable({
        url:"getShop",
        columns:[
            {field:"xuan",checkbox:true},
            {field:"id",title:"编号"},
            {field:"s_name",title:"名字"},
            {field:"s_img",title:"图片",formatter:function(value,row,index){
                    return "<img width='50px' height='50px' src='"+value+"'>";
                }},
            {field:"s_type",title:"型号"},
            {field:"s_color",title:"颜色"},
            {field:"product_price",title:"价格"},
            {field:"product_description",title:"介绍"},
            {field:"cxz",title:"操作",formatter:function(value,row){
                    var str='<button class="btn btn-info" onclick="del('+row.id+')">删除</button>';
                    return str;
                }},
        ],
        pagination:true,
        pageSize:10,
        pageList:[2,4,6,8,10],
        sidePagination: "client",
        toolbar:"#tb",
    })

    function del(id) {

        $.ajax({
            url:"delType",
            data:{id:id},
            success:function(){
                alert("成功")
                $('#myTable').bootstrapTable('refresh');//刷新表格
                $("#addLayer").modal('hide');
            }
        })

    }
</script>

</html>